<template>
  <div class="mainBox">
    <h1 style="color:white">用户登录</h1>
    <input class="inputBox" type="text" placeholder="请输入用户名" v-model="account">
    <input class="inputBox" type="password" placeholder="请输入密码" v-model="password">
    <div class="checkImg">
      <input class="checkInput" type="text" placeholder="验证码" v-model="checkCode">
      <img :src="imgSrc" alt="图片验证码" title="点击切换图片" @click="changeImgUrl">
    </div>
    <a-radio-group v-model:value="lgType" name="loginType">
      <a-radio value="1">账号</a-radio>
      <a-radio value="2">邮箱</a-radio>
    </a-radio-group>
    <a-button style="width: 200px;height: 50px" size="large" type="primary" @click="loginCheck">登录</a-button>
  </div>
</template>

<script setup>

import {onMounted, ref} from "vue";
import myAxios from "../axios.js";
import md5 from 'js-md5';
import {message} from "ant-design-vue";
import {useRouter} from "vue-router";
const imgSrc  = ref('');
const lgType = ref('1');
const account = ref('');
const password = ref('');
const checkCode = ref('');
const SALT = 'xwhking';
onMounted(() => {
  console.log('md5:' +md5("xwhkingadmin123"))
  myAxios.get("/user/imgcode").then(
      res => {
        console.log("数据接收结果：",res);
        imgSrc.value = "data:image/png;base64, " + res.data;
      }
  ).catch(
      error => {
        console.log("请求错误",error);
      }
  )
})
const changeImgUrl = () => {
  myAxios.get("/user/imgcode?"+ new Date().getTime()).then(
      res => {
        console.log("数据接收结果：",res);
        imgSrc.value = "data:image/png;base64, " + res.data;

      }
  ).catch(
      error => {
        console.log("请求错误",error);
      }
  )
}
const router  = useRouter();
const loginCheck = () => {
  console.log(`'用户名: ${account.value}，密码： ${password.value} , checkCode :${checkCode.value}'`);
  const submitValue = {};
  if(lgType.value == '1'){
    submitValue.value = {
      userName : account.value,
      loginCode : checkCode.value,
      userPassword : md5(SALT + password.value)
    }
  }else{
    submitValue.value = {
      email : account.value,
      loginCode : checkCode.value,
      userPassword : md5(SALT + password.value)
    }
  }
  myAxios.post('/user/login',submitValue.value).then(
      res => {
        if(res.code === 0){
          message.success('登录成功');
          router.push('/');
        }else{
          message.error(res.message);
        }
      }
  ).catch(
      error => {
        console.log('请求出错啦',error)
      }
  )
}
</script>

<style scoped>
.mainBox {
  height: 450px;
  width: 300px;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  margin:0 auto;
  margin-top:50px;
}
.mainBox .inputBox {
  height: 50px;
  width: 250px;
  background: rgba(255,255,255,0.4);
  outline: none;  font-size: 20px;
  border-radius: 25px;

  padding:20px;
  border:none;
}
  /* 为了更好的浏览器兼容性，使用带有浏览器前缀的样式 */
.mainBox .inputBox::-webkit-input-placeholder{
  color: black;
}

.mainBox .inputBox:-moz-placeholder {
  color: black;
}

.mainBox .inputBox::-moz-placeholder{
  color: black;
}

.mainBox .inputBox:-ms-input-placeholder {
  color: black;
}
.mainBox .checkImg{
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.mainBox .checkImg .checkInput{
  height: 48px;
  width: 100px;
  background: rgba(255,255,255,0.4);
  outline: none;
  font-size: 20px;
  border-radius: 25px;
  padding:20px;
  border:none;
}
.mainBox .checkImg img{
  height: 50px;
  width: 150x;
}
.mainBox .checkImg .checkInput::-webkit-input-placeholder{
  color: black;
  font-size:15px;
}

.mainBox .checkImg .checkInput:-moz-placeholder {
  color: black;
}

.mainBox .checkImg .checkInput::-moz-placeholder{
  color: black;
}

.mainBox .checkImg .checkInput:-ms-input-placeholder {
  color: black;
}
</style>